[Obj-C] JSONデータをモデルクラスを介して画面に表示する（前編）

概要

JSONからデータを取ってきて、モデルクラスで読み込んで、それをViewから使うという流れは、多くのアプリで使われるパターンですし、多くのアプリ開発者が必要としているパターンだと思います。

しかし、いざ実現しようとすると、特にプログラミングを始めたばかりの方にとっては、つまづくことが多い部分でもあると思います。

そこで、前編と後編に分けて、上記の流れをサンプルプログラムを使って解説します。

具体的には、モデルクラスの作成、JSONデータの読み取り、モデルクラスのインスタンスを複数持つ配列の作成、そして画面表示を実現するまでの流れをお伝えできればと思います。

全体の流れ

果物の名前と画像を表示するプログラムを作成します。

扱うクラスは以下の３つです。

• ViewController クラス
  • 画面表示を行います。Xcode プロジェクトを作成した際に自動で作成されたものを使います。
• Fruit クラス
  • 果物のモデルクラスです。名前と画像ファイル名をプロパティで持っています。
• FruitService クラス
  • JSONからデータを読み込むreadFruitsメソッドをもち、Fruit の 配列を返します。

Fruit クラスを作成する

Fruit クラスを作成しましょう。果物の名前と、画像名をプロパティに持った、モデルクラスです。

NSObject のサブクラスとして作成します。

ヘッダファイル

#import <Foundation/Foundation.h>
@interface Fruit : NSObject
@property (nonatomic, readonly) NSString *name;
@property (nonatomic, readonly) NSString *image;
- (instancetype)initWithDictionary:(NSDictionary *)dictionary;
@end

JSONをパースして生成された NSDictionary型のデータを受け取って初期化するために、initWithDictionary: メソッドを持ちます。

実装ファイル

#import "Fruit.h"

@implementation Fruit

- (instancetype)initWithDictionary:(NSDictionary *)dictionary
{
    self = [super init];
    if (self) {
        _name = [dictionary objectForKey:@"name"];
        _image = [dictionary objectForKey:@"image"];
    }
    return self;
}

@end

initWithDictionary: メソッドは、まず、NSDictionary 型のインスタンスを受け取って、指定するキーに対応するオブジェクトを取り出します。キー名は、果物の名前については"name"、画像名は"image"としましょう。それらをプロパティに受け渡しています。

まとめ

前編では、どんなクラスが必要かを考え、モデルクラス Fruit を作成しました。後編では、以下の内容でお届けします。

• JSONファイルの作成
• JSONファイルからデータを読み取り Fruit 型のデータ配列として返すメソッドを持つ、FruitService クラスの作成
• ViewControllerの実装
• StoryBoard実装
• アプリを実行

クレジット

本記事中の画像はCC BY-SA 2.0より提供されています。

oranges macro / Muffet